<template>
	<view>
		<uni-popup ref="gotwillValue" type="bottom" :hideBar="hideBar">
			<view class="gotwill-popup">
				<text class="iconfont icon-close1 gotwill-icon-close" @click="close()"></text>
				<!-- <rich-text class="gotwill-title" :nodes="title" v-if="title"></rich-text> -->
				<view class="popup-title" v-if="!noShort">
					<template v-if="syncShortNum>0">
						还差<icon-heart /><text class="red">{{syncShortNum}}</text>发起当前好物心愿
					</template>
					<text v-else>已满足发起当前好物心愿条件</text>
				</view>
				<view class="popup-sub-title" :class="{'popup-title':noShort}">支持他人心愿得心愿值<icon-heart /></view>
				<scroll-view scroll-y class="select-list-wrap">
					<view class="select-list" v-if="loaded&&popupSupportList.length>0">
						<view class="select-li" v-for="(item,index) in popupSupportList" :key="item.group_id" @click="toggleSelectLi(index)">
							<user-avatar class="select-li-image" :src="item.avatar_url" />
							<view class="select-li-title-box">
								<view class="select-li-title-h3"><text class="select-li-title-name">{{item.nick_name}}</text> 的心愿</view>
								<view class="selet-li-title-desc text-ellipsis-1">{{item.goods_name}}</view>
							</view>
							<view class="select-li-value"> 
								<view>支持<text class="red" :class="{'line-through':item.is_free}">¥{{item.need_pay_money}}</text></view>
								<tag text="免费特权" class="free-tag" v-if="item.is_free" />
							</view>
							<view class="select-li-status">
								<text class="iconfont icon-correct" :class="{active:item.is_select===1}"></text>
							</view>
						</view>
					</view>
					<view class="empty-box" v-if="loaded&&popupSupportList.length===0">
						数据加载失败，请重试
					</view>
				</scroll-view>
				<view class="gotwill-footer">
					<!-- <view class="gowill-footer-desc">
						<view class="selected-value">已选择<text class="selected-summery">¥{{selectMoney}}</text></view>
						<text class="selected-desc" v-if="noShort">我得{{selectWishNum}}心愿值，心愿值可发起好物心愿</text>
						<text class="selected-desc" v-else>可得{{selectWishNum}}心愿值，{{ selectWishNum>=shortNum?'满足兑换条件':`还差${$num.minus(shortNum,selectWishNum)}心愿值`}}</text>
					</view> -->
					<view class="gowill-footer-desc">
						<view class="selected-value">已选择<text class="red">¥{{selectMoney}}</text> 可得<view class="footer-get-text"><icon-heart />{{selectWishNum}}</view></view>
					</view>
					<text class="sure-support" @click="onGetwillPopupConfirm">确认获取</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import UserAvatar from '@/components/user/avatar.vue'
	import UniEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	export default {
		components:{
			uniPopup,
			UserAvatar,
			UniEmpty
		},
		props:{
			hideBar:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				title:'',
				popupSupportList:[],
				shortNum:0,
				extraNum:0,
				noShort:false,
				loaded:false
			}
		},
		computed:{
			selectSupportList(){
				return this.popupSupportList.filter(item=>item.is_select===1)
			},
			selectMoney(){
				return this.selectSupportList.reduce((acc,cur)=>this.$num.plus(acc,cur.need_pay_money),0)
			},
			selectWishNum(){
				if(this.selectSupportList.length===0){
					return 0
				}
				return this.selectSupportList.reduce((acc,cur)=>this.$num.plus(acc,cur.can_get_wish_coin_num),this.extraNum)
			},
			syncShortNum(){
				return this.$num.minus(this.shortNum,this.selectWishNum)
			},
			...mapGetters([
				'userInfo'
			])
		},
		methods:{
			async open({id,shortNum,scene}){
				this.shortNum=shortNum
				this.noShort=scene==='exchange'
				await this.getCanSupportList({id,scene})
				this.$refs.gotwillValue.open()
			},
			close(){
				this.$refs.gotwillValue.close()
			},
			async onGetwillPopupConfirm(){
				if(this.selectSupportList.length===0){
					return uni.showToast({
						icon:'none',
						title:'请至少选择一个心愿'
					})
				}
				const groupIds=this.selectSupportList.map(item=>item.group_id).join(',')
				await this.$store.dispatch('supportWish',groupIds)
				this.$refs.gotwillValue.close()
				this.title=''
				this.$emit('success',this.selectWishNum)
			},
			async getCanSupportList({id,scene}){
				this.popupSupportList=[]
				let data = await this.$api.canSupportList({goods_id:id,scene})
				this.loaded=true
				this.popupSupportList=data.wish_list
				let total=this.popupSupportList.reduce((acc,cur)=>this.$num.plus(acc,cur.can_get_wish_coin_num),this.extraNum)
				if(this.$num.minus(total,this.shortNum)<0){
					uni.showToast({
						icon:'none',
						title:'支持当前所有心愿后依然心愿值不足，请稍后重试~'
					})
					// #ifdef MP-WEIXIN
					wx.reportAnalytics('multi_list_short', {
					  user_id: this.userInfo.user_id,
					  goods_id: id,
					})
					// #endif
				}
				this.title=data.support_wish_reward_info.wish_coin_text
				this.extraNum=data.support_wish_reward_info.extra_give
			},
			toggleSelectLi(index){
				let curItem = this.popupSupportList[index]
				const isSelected=curItem.is_select===1?0:1
				this.popupSupportList.splice(index,1,{...curItem,is_select:isSelected})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gotwill-popup{
		position: relative;
		padding:36rpx 0rpx var(--safe-area-inset-bottom);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #fff;
	}
	.popup-sub-title{
		font-size: 24rpx;
		color:#999;
		margin-bottom: 40rpx!important;
		text-align: center;
	}
	.popup-title{
		margin-bottom: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color:#333;
	}
	
	// .gotwill-title{
	// 	margin-bottom: 40rpx;
	// 	text-align: center;
	// 	font-size: 32rpx;
	// 	font-weight: bold;
	// 	color:#000;
	// }
	.gotwill-icon-close{
		position: absolute;
		font-size: 50rpx;
		color:#B1B1B1;
		top:20rpx;
		right:20rpx;
		z-index: 2;
	}
	.select-list-wrap{
		max-height:600rpx;
	}
	.empty-box{
		padding: 100rpx 0 120rpx;
		font-size: 30rpx;
		color: #999;
		text-align: center;
	}
	.select-list{
		padding:0rpx 36rpx;
	}
	.select-li{
		display: flex;
		align-items: center;
		padding:0rpx 0 28rpx;
		margin-bottom:28rpx;
		border-bottom: 1rpx solid #F0F0F0;
		// margin-bottom:15rpx;
	}
	.select-li-image{
		margin-right:20rpx;
	}
	.select-li-title-box{
		flex:1;
		overflow: hidden;
	}
	.select-li-title-h3{
		margin-bottom: 15rpx;
		font-size:28rpx;
		font-weight: 400;
		color:#333;
	}
	.select-li-title-name{
		margin-right:10rpx;
		font-size:28rpx;
		font-weight: 600;
		color:#E7404A;
	}
	.selet-li-title-desc{
		font-size:24rpx;
		font-weight: 400;
		color:#666;
	}
	.select-li-value{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left:20rpx;
		font-size: 24rpx;
		color:#999;
	}
	.free-tag{
		margin-top: 10rpx;
	}
	.select-li-status{
		margin-left:30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width:50rpx;
		height:50rpx;
	}
	.icon-correct{
		font-size:50rpx;
		color:#999;
		&.active{
			color:#E7404A;
		}
	}
	.gotwill-footer{
		display: flex;
		width:100%;
		height:98rpx;
		background-color: #fff;
		border-top:1rpx solid #E2E2E2;
	}
	.gowill-footer-desc{
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 36rpx;
	}
	.selected-value{
		display: flex;
		align-items: center;
		font-size:24rpx;
		color:#000;
		.red{
			margin-right: 10rpx;
		}
	}
	.footer-get-text{
		font-size: 30rpx;
		color:#E7404A;
	}
	.selected-summery{
		font-size: 32rpx;
		font-weight: 600;
		color:#E7404A;
	}
	.selected-desc{
		font-size:22rpx;
		font-weight: 400;
		color:#E7404A;
	}
	.sure-support{
		padding: 0rpx 78rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #E7404A;
		font-size:36rpx;
		color:#fff;
	}
</style>
